const app = getApp()
import { list } from '../../../api/goods'

Page({
  data: {
    header: app.global.headerHeight,
    back: true,
    title: '商品',
    loading: true,
    loadmore: false,
    list: null,
    layout: false,
    keyword: '',
    form: {
      page: 1,
      limit: 20,
      category: 0,
      type: 0,
      keyword: '',
      best: 0,
      new: 0,
      hot: 0
    },
    abnor: {
      title: '抱歉！没找到相关商品~',
      button: ''
    },
    tabs: [{
      id: 0,
      type: 40,
      name: '销量',
      selected: false
    }, {
      id: 1,
      type: 50,
      name: '新品',
      selected: false
    }],
    dropdown: [{
      id: 0,
      type: 10,
      name: '综合',
      selected: true
    }, {
      id: 1,
      type: 20,
      name: '价格升序',
      selected: false
    }, {
      id: 2,
      type: 30,
      name: '价格降序',
      selected: false
    }],
    dropdownName: '综合',
    dropdownShow: false,
    dropdownIndex: -1,
    tabIndex: -1
  },

  onLoad (options) {
    this.data.form.category = options.category ? options.category : 0
    this.data.form.keyword = options.keyword ? options.keyword : ''
    this.data.form.best = options.best ? options.best : ''
    this.data.form.new = options.new ? options.new : ''
    this.data.form.hot = options.hot ? options.hot : ''
    this.data.form.group = options.group ? options.group : ''
    this.setData({
      loading: true,
      keyword: this.data.form.keyword
  })
    this.getList()
  },
  onPullDownRefresh () { /* 监听用户下拉动作*/ },
  onReachBottom () {
    if (this.data.form.page == this.data.form.last_page) {
      this.setData({ loadmore: true })
    } else {
      this.data.form.page += 1
      this.getList()
    }
  },

  // ===================methon================

  getList () {
    list(this.data.form).then(res => {
      const { data } = res
      this.data.list || (this.data.list = [])
      const list = this.data.list.concat(data.data)
      this.data.form.last_page = res.data.last_page
      this.setData({
        list: list,
        init: false,
        loadmore: data.last_page <= 1
      })
    })
      .finally(() => {
        this.setData({ loading: false })
        wx.hideLoading()
      })
  },

  changeList () {
    this.setData({ layout: !this.data.layout })
  },

  tabsClick (event) {
    const selectIndex = event.currentTarget.dataset.index
    const tabs = this.data.tabs
    const dropdown = this.data.dropdown
    const form = this.data.form
    let tabIndex = this.data.tabIndex

    // 点击相同的tab不重复触发搜索
    if (selectIndex != tabIndex) {
      tabs.forEach((item, index) => {
        if (index == selectIndex) {
          item.selected = true
          form.type = item.type
          tabIndex = index
        } else {
          item.selected = false
        }
      })
      dropdown.forEach((item, index) => {
        item.selected = false
      })
      this.setData({
        dropdownShow: false,
        tabs: tabs,
        form: form,
        tabIndex: tabIndex,
        dropdown: dropdown,
        dropdownIndex: -1,
        dropdownName: '综合'
      })
      this.handleSearch()
    }
  },

  dropdownItemClick (event) {
    const selectIndex = event.currentTarget.dataset.index
    const tabs = this.data.tabs
    const dropdown = this.data.dropdown
    const form = this.data.form
    let dropdownIndex = this.data.dropdownIndex
    let dropdownName = this.data.dropdownName

    if (selectIndex != dropdownIndex) {
      dropdown.forEach((item, index) => {
        if (index == selectIndex) {
          dropdownName = item.name
          item.selected = true
          form.type = item.type
          dropdownIndex = index
        } else {
          item.selected = false
        }
      })
      tabs.forEach((item, index) => {
        item.selected = false
      })
      this.setData({
        dropdown: dropdown,
        dropdownName: dropdownName,
        form: form,
        dropdownIndex: dropdownIndex,
        tabs: tabs,
        tabsIndex: -1
      })
      this.handleSearch()
    }
    this.setData({ dropdownShow: false })
  },

  dropdownClick (event) {
    this.setData({ dropdownShow: !this.data.dropdownShow })
  },

  dropdownClose () {
    this.setData({ dropdownShow: false })
  },

  handleSearch () {
    this.data.list = []
    this.data.form.page = 1
    wx.showLoading({ title: '加载中...' })
    list(this.data.form).then(res => {
      this.getList(res)
    })
      .finally(() => {
        wx.hideLoading()
      })
  },

  input (event) {
    this.data.form.keyword = event.detail.value
  }
})